import { Box, useStyleConfig } from "@chakra-ui/react"

const stylesObj = {
    baseStyle: {
        borderRadius: 'lg',
        color: 'white'
    },
    sizes: {
        sm: {
            px: '3',
            py: '1',
            fontSize: '12px'
        },
        md: {
            px: '4',
            py: '5',
            fontSize: '14px'
        }
    },
    variants: {
        primary: {
            bgColor: 'blue.500'
        },
        danger: {
            bgColor: 'red.500'

        }
    },
    defaultProps: {
        size: "md",
        variant: "primary"
    }
}

export default stylesObj

export function button(props) {
    const { size, variant, ...rest } = props
    //eslint-disable-next-line
    const styles = useStyleConfig("LagouButton", { size, variant })
    console.log('size', size, variant, styles)
    return <Box as="button" sx={styles} {...rest} />
} 